<template>
<div id="container"> 
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import * as THREE from 'three'

function createLoader(loader:THREE.TextureLoader,path:string){
    const texture = loader.load(path);
    texture.colorSpace = THREE.SRGBColorSpace;
    return texture;
}

onMounted(()=>{
    const cubes:THREE.Mesh[] = [];
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.getElementById("container")?.appendChild(renderer.domElement);
    const geometry = new THREE.BoxGeometry();
    //基本贴图加载
    const loader = new THREE.TextureLoader();
    const texture = loader.load( '/pngs/001.jpg' );
    texture.colorSpace = THREE.SRGBColorSpace;
    texture.offset.set(0.5, 0.5); //设置偏移
    texture.repeat.set(2, 2); //设置横纵方向的重复
    texture.wrapS = THREE.RepeatWrapping; //纹理重复 设置横向的拉伸方式 THREE.ClampToEdgeWrapping-最后一个像素重复  THREE.MirroredRepeatWrapping-镜像重复
    texture.wrapT = THREE.RepeatWrapping;   //设置纵向的拉伸方式
    texture.center.set(.5, .5); //设置纹理中心
    texture.rotation = THREE.MathUtils.degToRad(45); //设置纹理旋转
    const material = new THREE.MeshBasicMaterial( { map: texture } );

    const cube = new THREE.Mesh( geometry, material );
    scene.add( cube );
    cubes.push(cube);

    //加载多个贴图
    const materials = [
        new THREE.MeshBasicMaterial( { map: loader.load( '/pngs/001.jpg' ) } ),
        new THREE.MeshBasicMaterial( { map: loader.load( '/pngs/002.jpg' ) } ),
        new THREE.MeshBasicMaterial( { map: loader.load( '/pngs/003.jpg' ) } ),
        new THREE.MeshBasicMaterial( { map: loader.load( '/pngs/004.jpg' ) } ),
        new THREE.MeshBasicMaterial( { map: loader.load( '/pngs/005.jpg' ) } ),
        new THREE.MeshBasicMaterial( { map: loader.load( '/pngs/006.jpg' ) } ),
    ];
    const cube1 = new THREE.Mesh( geometry, materials );
    cube1.position.set(2, 0, 0);
    scene.add( cube1 );
    cubes.push(cube1);


    //纹理加载也可以支持异步加载，当纹理比较复杂的时候可以使用回调来加载
    loader.load( '/pngs/003.jpg', function ( texture ) { 
        const material = new THREE.MeshBasicMaterial( { map: texture } );
        const cube2 = new THREE.Mesh( geometry, material );
        cube2.position.set(-2, 0, 0);
        scene.add( cube2 );
        cubes.push(cube2);
    } );

    //也可以等待多个纹理加载完成
    const loadManager = new THREE.LoadingManager(); 
    const loader1 = new THREE.TextureLoader(loadManager);
    const materials1 = [
        new THREE.MeshBasicMaterial( { map: loader1.load('/pngs/001.jpg') } ),
        new THREE.MeshBasicMaterial( { map: loader1.load('/pngs/002.jpg') } ),
        new THREE.MeshBasicMaterial( { map: loader1.load('/pngs/003.jpg') } ),
        new THREE.MeshBasicMaterial( { map: loader1.load('/pngs/004.jpg') } ),
        new THREE.MeshBasicMaterial( { map: loader1.load('/pngs/005.jpg') } ),
        new THREE.MeshBasicMaterial( { map: loader1.load('/pngs/006.jpg') } ),
    ];

    //加载进度回调
    loadManager.onProgress = (url, loaded, total)=>{ 
        console.log("加载进度"+url+":" + loaded + "  " + total);
    };

    //加载完成回调
    loadManager.onLoad = ()=>{
        const cube3 = new THREE.Mesh( geometry, materials1 );
        cube3.position.set(0,-2,0);
        scene.add( cube3 );
        cubes.push(cube3);
    };


    camera.position.z = 5;

    const animate = function () {
        cubes.forEach(cube=>{
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
        });
        renderer.render( scene, camera );
        requestAnimationFrame( animate );
    }
    requestAnimationFrame( animate );

})
</script>

<style scoped>
</style>